<template>
	<a-modal :title="title" :width="1400" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form layout="inline" labelAlign="right">
				<div v-if="currentType == 'invoice'">
					<a-row :gutter="10">
						<a-col :md="10" :sm="24">
							<a-form-item label="开票日期">
								<a-range-picker :value-format="'YYYY-MM-DD HH:mm:ss'" v-model="invoiceTime" @change="TimeOk" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="发票号">
								<a-input style="width: 100%;" v-model="queryParam.invoiceNumber" placeholder="请输入" />
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="24">
							<a-button type="primary" @click="$refs.table.refresh();">搜索</a-button>
							<a-button
								@click="() => { queryParam.startTime = null; queryParam.endTime = null; invoiceTime = null; queryParam.invoiceNumber = null; $refs.table.refresh() }">重置</a-button>
							<a-button type="primary" style="margin-left: 30px;"
								@click="$refs.goInvoiceOrPaymentForm.toInvoice(tipsObject)" :disabled="disabled">去开票</a-button>
						</a-col>
					</a-row>
				</div>
				<div v-if="currentType == 'payment'">
					<a-row :gutter="10">
						<a-col :md="10" :sm="24">
							<a-form-item label="付款日期">
								<a-range-picker :value-format="'YYYY-MM-DD HH:mm:ss'" v-model="payTime" @change="TimeOk"
									style="width: 100%;" />
							</a-form-item>
						</a-col>
						<a-col :md="12" :sm="24" style="text-align: right;">
							<a-button type="primary" @click="$refs.table.refresh()">搜索</a-button>
							<a-button
								@click="() => { queryParam.startTime = null; queryParam.endTime = null; payTime = null; $refs.table.refresh() }">重置</a-button>
							<a-button type="primary" style="margin-left: 30px;" :disabled="disabled"
								@click="$refs.goInvoiceOrPaymentForm.toPayment(tipsObject)">去付款</a-button>
						</a-col>
					</a-row>
				</div>
			</a-form>
			<div style="margin-top: 10px;font-weight: bold">
				<div style="margin: 20px 0px;" v-if="currentType == 'invoice'">
					<span>已开票金额 : {{ (tipsObject.confirmAmount - tipsObject.daikaipiao).toFixed(2) }}</span>
					<span style="margin-left: 20px;">待开票金额 : {{ tipsObject.daikaipiao }}</span>
				</div>
				<div style="margin: 20px 0px;" v-if="currentType == 'payment'">
					<span>已付款金额 : {{ (tipsObject.confirmAmount - tipsObject.daifukuan).toFixed(2) }}</span>
					<span style="margin-left: 20px;">待付款金额 : {{ tipsObject.daifukuan }}</span>
				</div>
			</div>
			<s-table ref="table" :columns="columns" :data="loadData" :alert="true">
				<span slot="invoiceAction" slot-scope="text, record">
					<!-- <a v-if="record.invoiceDocument" download target="_blank"
						:href="`${$store.state.baseUrl}/sysFileInfo/preview?id=${record.invoiceDocument}`">下载发票</a>
					<a v-else disabled>暂无发票</a>-->
					<a v-if="record.invoiceDocument" @click="sysFileInfoDownloadFn(record.invoiceDocument)">下载发票</a>
					<a v-else disabled>暂无发票</a>
					<a-divider type="vertical" v-if="!disabled" /> 
					<a-popconfirm placement="topRight" v-if="!disabled" title="确认删除？"
						@confirm="() => InvoiceRecordDeleteFn(record)">
						<a>删除</a>
					</a-popconfirm>
					<a-divider v-if="!disabled" type="vertical" />
					<a @click="$refs.goInvoiceOrPaymentForm.toInvoiceEdit(record, tipsObject)" v-if="!disabled">修改</a>
				</span>
				<span slot="paymentAction" slot-scope="text, record">
					<!-- <a v-if="record.payDocument" target="_blank" download
						:href="`${$store.state.baseUrl}/sysFileInfo/preview?id=${record.payDocument}`">下载付款凭证</a>
					<a v-else disabled>暂无付款凭证</a> -->
					<a v-if="record.payDocument" @click="sysFileInfoDownloadFn(record.payDocument)">下载付款凭证</a>
					<a v-else disabled>暂无付款凭证</a>
					<a-divider type="vertical" v-if="!disabled" />
					<a-popconfirm placement="topRight" v-if="!disabled" title="确认删除？" @confirm="() => payRecordDeleteFn(record)">
						<a>删除</a>
					</a-popconfirm>
					<a-divider type="vertical" v-if="!disabled" />
					<a @click="$refs.goInvoiceOrPaymentForm.toPaymentEdit(record, tipsObject)" v-if="!disabled">修改</a>
				</span>
			</s-table>
		</a-spin>
		<goInvoiceOrPaymentForm ref="goInvoiceOrPaymentForm" @ok="handleOk" />
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import {
	InvoiceRecordPage,
	InvoiceRecordDelete,
	InvoiceRecordEdit,

	payRecordPage,
	payRecordDelete,
	payRecordEdit
} from '@/api/modular/main/bill'
import { curry } from 'lodash';

import goInvoiceOrPaymentForm from './goInvoiceOrPaymentForm.vue';

import { sysFileInfoDownloadFn } from "@/components/pbUpload/download"

export default {
	components: {
		STable,
		goInvoiceOrPaymentForm
	},
	data() {
		return {
			title: '',
			invoiceTime: null,
			payTime: null,
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			queryParam: {},  // 查询参数
			columns: [       // 表头

			],
			loadData: parameter => {
				console.log("this.currentType", this.currentType);
				if (this.currentType == 'invoice') {
					return InvoiceRecordPage(Object.assign(parameter, this.queryParam)).then(res => {
						if (res.data.rows.length == 0) {
							this.$set(this.tipsObject, "daikaipiao", (this.tipsObject.confirmAmount - this.tipsObject.invoiceAmount).toFixed(2))
						} else {
							let sum = 0;
							res.data.rows.forEach(val => {
								sum += val.invoiceAmount;
							});
							this.$set(this.tipsObject, "daikaipiao", (this.tipsObject.confirmAmount - sum).toFixed(2))
						}
						return res.data
					})
				} else {
					return payRecordPage(Object.assign(parameter, this.queryParam)).then(res => {
						if (res.data.rows.length == 0) {
							this.$set(this.tipsObject, "daifukuan", (this.tipsObject.confirmAmount - this.tipsObject.payAmount).toFixed(2))
						} else {
							let sum = 0;
							res.data.rows.forEach(val => {
								sum += val.payAmount;
							});
							this.$set(this.tipsObject, "daifukuan", (this.tipsObject.confirmAmount - sum).toFixed(2))
						}
						return res.data
					})
				}
			},
			sourceData: [],
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			currentType: null,
			tipsObject: {},
			disabled: false,
		}
	},
	methods: {
		sysFileInfoDownloadFn,
		init(record) {
			let _this = this
			this.visible = true
			this.queryParam.pageSize = -1
		},
		TimeOk(value) {
			console.log(value);
			this.queryParam.startTime = value[0].split(" ")[0] + ' 00:00:00';
			this.queryParam.endTime = value[1].split(" ")[0] + ' 23:59:59';
		},
		/**
		 * 开票 付款状态为已完成 --- 只读
		 */
		readonly(record, type) {
			if (type == 1) {
				this.invoice(record);
			} else {
				this.payment(record);
			}

			this.disabled = true;
		},
		/**
		 * 删除开票记录
		 * @param record 
		 */
		InvoiceRecordDeleteFn(record) {
			InvoiceRecordDelete({
				reconciliationOrderInvoiceRecordId: record.reconciliationOrderInvoiceRecordId
			}).then(res => {
				if (res.code == 200) {
					this.$message.success('删除成功');
					this.$emit("ok");
					this.handleOk();
				}
			})
		},
		/**
		 * 删除付款记录
		 * @param record 
		 */
		payRecordDeleteFn(record) {
			payRecordDelete({
				reconciliationOrderPayRecordId: record.reconciliationOrderPayRecordId
			}).then(res => {
				if (res.code == 200) {
					this.$message.success('删除成功');
					this.$emit("ok");
					this.handleOk();
				}
			})
		},
		//开票
		invoice(record) {
			this.currentType = "invoice";
			this.title = "开票"
			this.visible = true;
			this.disabled = false;
			this.tipsObject = record;
			this.queryParam = {};
			this.invoiceTime = null;
			this.columns = [
				{
					title: '序号',
					width: '80px',
					dataIndex: '',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '供应商',
					dataIndex: 'orgIdSupplierName'
				},
				{
					title: '开票金额',
					dataIndex: 'invoiceAmount'
				},
				{
					title: '开票日期',
					dataIndex: 'invoiceTime'
				},
				{
					title: '发票号',
					dataIndex: 'invoiceNumber'
				},
				{
					title: '操作',
					dataIndex: '',
					width: '220px',
					scopedSlots: { customRender: 'invoiceAction' }
				},
			];
			this.fileList = [];
			let _this = this
			this.queryParam.reconciliationOrderId = record.reconciliationOrderId
			this.queryParam.pageSize = 9999;
			setTimeout(() => {
				_this.$refs.table.refresh();
			}, 300);

		},
		//付款
		payment(record) {
			this.currentType = "payment";
			this.visible = true;
			this.disabled = false;
			this.title = "付款"
			this.columns = [
				{
					title: '序号',
					width: '80px',
					dataIndex: '',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '供应商',
					dataIndex: 'orgIdSupplierName'
				},
				{
					title: '付款金额',
					dataIndex: 'payAmount'
				},
				{
					title: '付款日期',
					dataIndex: 'payTime'
				},
				{
					title: '操作',
					dataIndex: '',
					width: '240px',
					scopedSlots: { customRender: 'paymentAction' }
				},
			]
			this.queryParam = {};
			this.payTime = null;
			this.tipsObject = record;
			let _this = this
			this.queryParam.reconciliationOrderId = record.reconciliationOrderId
			this.queryParam.pageSize = 9999;
			setTimeout(() => {
				_this.$refs.table.refresh();
			}, 300);
		},
		handleOk() {
			this.$refs.table.refresh()
			this.$emit("ok");
		},
		handleSubmit() {
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
		}
	}
}
</script>
